<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>

	<ui:composition template="../template/template.xhtml">

		<ui:define name="content">
			<p:panel header="appointment">
				<h:form>
					<p:accordionPanel>
						<p:tab title="1. pick service">
							<p:dataTable var="service"
								emptyMessage="no services found with given criteria"
								filteredValue="#{appointmentJSF.filteredServices}"
								rowKey="#{service.serviceId}" value="#{appointmentJSF.services}"
								selection="#{appointmentJSF.selectedService}"
								selectionMode="single">

								<p:column headerText="service" sortBy="#{service.name}"
									filterBy="#{service.name}" filterMatchMode="contains">
									<h:outputText value="#{service.name}" />
								</p:column>
								<p:column headerText="description">
									<h:outputText value="#{service.description}" />
								</p:column>
								<p:column headerText="duration"
									filterBy="#{service.durationInMin}"
									sortBy="#{service.durationInMin}" filterMatchMode="exact">
									<h:outputText value="#{service.durationInMin} min" />
								</p:column>
								<p:column headerText="book deadline"
									filterBy="#{service.bookDeadlineInMin}"
									sortBy="#{service.bookDeadlineInMin}" filterMatchMode="exact">
									<h:outputText value="#{service.bookDeadlineInMin} min" />
								</p:column>
								<p:column headerText="cancel deadline"
									filterBy="#{service.cancelDeadlineInMin}"
									sortBy="#{service.cancelDeadlineInMin}" filterMatchMode="exact">
									<h:outputText value="#{service.cancelDeadlineInMin} min" />
								</p:column>
								<p:column headerText="provider"
									sortBy="#{service.forename} #{service.sirname}"
									filterBy="#{service.forename} #{service.sirname}"
									filterMatchMode="contains">
									<h:outputText value="#{service.forename} #{service.sirname}" />
								</p:column>
								<p:column headerText="phone number">
									<h:outputText value="#{service.phoneNumber}" />
								</p:column>
								<p:column headerText="email">
									<h:outputText value="#{service.email}" />
								</p:column>
							</p:dataTable>
						</p:tab>
						<p:tab title="2. pick location">
							<table>
								<tr>
									<td><h:outputLabel for="country" value="country*" /></td>
									<td><p:inputText id="country"
											value="#{appointmentJSF.location.country}" required="true"
											label="country" /></td>
								</tr>
								<tr>
									<td><h:outputLabel for="city" value="city*" /></td>
									<td><p:inputText id="city"
											value="#{appointmentJSF.location.city}" required="true"
											label="city" /></td>
								</tr>
								<tr>
									<td><h:outputLabel for="zip" value="zip*" /></td>
									<td><p:inputText id="zip"
											value="#{appointmentJSF.location.zip}" required="true"
											label="zip" /></td>
								</tr>
								<tr>
									<td><h:outputLabel for="street" value="street*" /></td>
									<td><p:inputText id="street"
											value="#{appointmentJSF.location.street}" required="true"
											label="street" /></td>
								</tr>
							</table>
						</p:tab>
						<p:tab title="3. set start time">
							<table>
								<tr>
									<td><h:outputLabel for="startTime" value="start time*" /></td>
									<td><p:calendar value="#{appointmentJSF.start}"
											id="startTime" pattern="dd-MM-yyyy HH:mm" timeZone="CET"
											showOn="button" /></td>
								</tr>
							</table>
						</p:tab>
					</p:accordionPanel>

					<p:commandButton styleClass="bottomButton"
						action="#{appointmentJSF.addAppointment}"
						value="4. add appointment" />

				</h:form>
			</p:panel>
		</ui:define>

	</ui:composition>

</h:body>

</html>